<script setup>
import {ref, watch} from "vue";
import "@material/web/select/outlined-select";
import "@material/web/select/select-option";

const props = defineProps("label");
const model = defineModel({default: new Date().getFullYear()});
const selectedIndex = ref(model.value - 1999);

watch(model, model=>{
  selectedIndex.value = model - 1999;
});

watch(selectedIndex, selectedIndex=>{
  model.value = selectedIndex + 1999;
});

</script>

<template>
  <md-outlined-select class="start-year" :label="props.label" v-model="selectedIndex">
    <md-select-option v-for="n in 100" :value="n" :key="n">
      <div slot="headline">{{ n + 1999 }}</div>
    </md-select-option>
  </md-outlined-select>
</template>